<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<title>筛查提交</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit"/>
		<meta http-equiv="Cache-Control" content="no-siteapp"/>
		<meta name="apple-mobile-web-app-title" content="移动端描述内容"/>
		<link rel="icon" type="image/png" href="/assets/common/i/favicon.ico"/>
		
		<link rel="stylesheet" href="/assets/perpageres/vant.min.css"/>
		<script src="/assets/perpageres/vue.min.js"></script>
		<script src="/assets/perpageres/vant.min.js"></script>
		<script src="/assets/perpageres/zepto.min.js"></script>
		
		<script src="//at.alicdn.com/t/font_783249_e5yrsf08rap.js"></script>
		<style>
			.van-checkbox { padding-bottom: 10px !important; }
			.price{color:#F00; font-weight:bold;padding-left:10px;}
			.van-field__label{width:2em !important;}
			.van-checkbox--horizontal{margin-right:10px; !important}
			.fourFont .van-field__label{width:5.2em !important;}
		</style>
	</head>
	
	<body style="padding:0;margin:0;background-color:#efefef;">
		<div id="VueBigBox" style="width:100%;box-sizing: border-box;">
			<div style="width:100%;display:flex;text-align:center;height:50px;background-color:#D5B391;color:#000;font-size:16px;line-height:50px;">
				<div style="flex:1;text-align:left;padding-left:10px;" @click="jumpUrl(1)"><van-icon name="bag-o" color="#000" />新增</div>
				<div>医疗共建 全民筛查</div>
				<div style="flex:1;text-align:right;padding-right:10px;" @click="jumpUrl(2)"><van-icon name="shop-o" color="#000" />列表</div>
			</div>
			
			<div style="padding:20px 10px;box-sizing: border-box;background-color:#FFF;border-radius:10px;width:98%;margin:10px auto;">
				<!--<div><van-divider>基础信息</van-divider></div>-->
				<van-form validate-first @failed="onFailed">
				<div>
					<!-- <div style="padding-bottom:10px;text-align: left;color:#999;font-size:12px;">基础信息</div> -->
					
					<van-cell-group>
					  <van-field required v-model="trueName" label="姓名" placeholder="请输入姓名" />
					</van-cell-group>
					
					<van-cell-group>
					  <!-- <van-field required v-model="mobile"  label="手机" placeholder="请输入手机号" 
					  :rules="[{ required: true, message: '请填写手机号' },
						  { pattern:ruleMobile, message: '手机号不正确' }]" 
					  /> -->
					  <van-field required v-model="mobile" maxlength="11"  label="手机" placeholder="请输入手机号" />
					</van-cell-group>
					
					<van-cell-group>
					  <van-field required v-model="address"  label="地址" placeholder="请输入地址" />
					</van-cell-group>
					
					<van-cell-group>
					  <van-field required name="radio" label="性别">
					    <template #input>
					      <van-radio-group v-model="radio" direction="horizontal" checked-color="#D5B391">
					        <van-radio name="1">男</van-radio>
					        <van-radio name="2">女</van-radio>
					      </van-radio-group>
					    </template>
					  </van-field>
					</van-cell-group>
					
					<van-cell-group>
					  <van-field required name="checkboxGroup" label="项目">
					    <template #input>
					      <van-checkbox-group v-model="checkboxGroup" @change="checkboxChange" direction="horizontal" checked-color="#D5B391">
					        <van-checkbox name="1" shape="square">1. 妇科检查<span class="price">¥9元</span></van-checkbox>
					        <van-checkbox name="2" shape="square">2. 宫颈脱落细胞学检查(TCT)<span class="price">¥135元</span></van-checkbox>
							<van-checkbox name="3" shape="square">3. 阴道镜检查<span class="price">¥135元</span></van-checkbox>
							<van-checkbox name="4" shape="square">4. 阴道分泌物显微镜检查<span class="price">¥9元</span></van-checkbox>
							<van-checkbox name="5" shape="square">5. 经腹部妇科彩色多普勒超声检查<span class="price">¥99元</span></van-checkbox>
							<van-checkbox name="6" shape="square">6. 乳腺触诊<span class="price">免费 ¥0元</span></van-checkbox>
							<van-checkbox name="7" shape="square">7. 乳腺彩超<span class="price">¥117元</span></van-checkbox>
							<van-checkbox name="8" shape="square">8. 骨盆评估<span class="price">¥135元</span></van-checkbox>
					      </van-checkbox-group>
					    </template>
					  </van-field>
					</van-cell-group>
					
					<van-cell-group class="fourFont">
					  <van-field required name="paytype" label="支付方式">
					    <template #input>
					      <van-radio-group v-model="paytype" direction="horizontal" checked-color="#D5B391">
					        <van-radio name="1">会员通道</van-radio>
					        <van-radio name="2">在线支付</van-radio>
					      </van-radio-group>
					    </template>
					  </van-field>
					</van-cell-group>
					
					<van-cell-group class="fourFont">
					  <van-field required v-model="introID" label="推荐人ID号" readonly placeholder="请输入姓名" />
					</van-cell-group>
					
					<div style="padding:10px;text-align: left;color:#333;font-size:14px;">
						<span>项目总价格：</span>
						<span style="color:#F00;font-size:16px;font-weight: bold;">¥ {{allPrice}}</span>
					</div>

				</div>
				
				<div style="padding-top:30px;">
					<van-button type="warning" style="width:100%;" color="#D5B391" @click="sendFormFun">立 即 提 交</van-button>
				</div>
				
				</van-form>
			</div>
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var YU = '#{$other["YU"]}#';
	var vue = new Vue({
		el: '#VueBigBox',
		data:{
			test:123456,
			value1: '',
			introID: '#{$userInfo["user_id"]}#',
			introNickName: '#{$userInfo["nickName"]}#',
			introAvatarUrl: '#{$userInfo["avatarUrl"]}#',
			resyesno: false,
			trueName: '',
			address:'',
			mobile:'',
			radio: '0',
			paytype:'1',
			checkboxGroup: [],
			proNameArr:['no','妇科检查','宫颈脱落细胞学检查(TCT)','阴道镜检查','阴道分泌物显微镜检查','经腹部妇科彩色多普勒超声检查','乳腺触诊','乳腺彩超','骨盆评估'],
			priceArr:[0,9,135,135,9,99,0,117,135],
			allPrice:0,
			allProNameArr:[],
			ruleMobile: /1[3-9]\d{9}/,
			ajaxisRunning: false,
		},
		methods:{
			testFun(aa){
				vue.test = aa;
			},
			jumpUrl(cnt){
				if(cnt==1){
					window.location.href = "/index.php?s=/mobile/perpage/index";
				}
				else{
					window.location.href = "/index.php?s=/mobile/perpage/createlist";
				}
			},
			onFailed(errorInfo) {
			  console.log('failed', errorInfo);
			},
			checkboxChange(e) {
			  console.log('failed', e);
			  var nowAllPrice = 0;
			  var nowAllProNameArr = [];
			  for(var i=0,cnt=this.checkboxGroup.length; i<cnt; i++){
				nowAllPrice += this.priceArr[this.checkboxGroup[i]]
				nowAllProNameArr.push(this.proNameArr[this.checkboxGroup[i]])
			  }
			  this.allPrice = nowAllPrice
			  this.allProNameArr = nowAllProNameArr
			  //vant.Toast(this.checkboxGroup.length);
			},
			sendFormFun(){
				var trueName = $.trim(this.trueName)
				var mobile = $.trim(this.mobile)
				var address = $.trim(this.address)
				var sex = this.radio
				var allPrice = this.allPrice
				if(trueName=="" || mobile=="" || address==""){
					vant.Dialog.alert({message: '请输入姓名、电话、地址'})
					return false
				}
				if(!(/1[3-9]\d{9}/.test($.trim(this.mobile)))){
					vant.Dialog.alert({message: '手机号码不正确'})
					return false
				}
				if(sex==0){
					vant.Dialog.alert({message: '请选择性别'})
					return false
				}
				if(this.checkboxGroup.length == 0){
					vant.Dialog.alert({message: '请选择医疗项目'})
					return false
				}
				// 发送数据请求
				if(this.ajaxisRunning==true){
					vant.Toast('请勿重复点击');
				}
				else{
					this.ajaxisRunning = true;
					// vant.Toast('请求后台ajax数据');
					$.post(YU+'/index.php?s=/mobile/perpage/ajaxForm', {
						introID:vue.introID,introNickName:vue.introNickName,introAvatarUrl:vue.introAvatarUrl,
						paytype:vue.paytype,
						trueName,mobile,address,sex,allPrice,resProIdArr:vue.checkboxGroup,resProNameArr:vue.allProNameArr
					}, function (res) {
						vue.ajaxisRunning = false;
						console.log(res)
						// var res = JSON.parse(_res);
						if(res.code){
							vant.Dialog.alert({message: '恭喜，提交成功'}).then(()=>{
								window.location.href = YU+"/index.php?s=/mobile/perpage/createlist";
							});
						}
						else{
							vant.Dialog.alert({message: res.msg})
						}
					})
				}
			}
		}
	});
	
	// vant.Toast('成功启用vant框架');
	Vue.use(vant.Button);	// 初级组件可不用use引用
	Vue.use(vant.Switch);
	Vue.use(vant.Picker);	// 高级组件需要use引用
	Vue.use(vant.Form);
	Vue.use(vant.Field);
	Vue.use(vant.Checkbox);
	Vue.use(vant.Dialog);
	
	//vant.Dialog.alert({message: '弹窗内容'})
	// vant.Dialog.alert({message: '#{$other["YU"]}#'})
</script>